<!-- 
  Setup 有两种形式：
    1. Setup 函数
      <script>
        export default {
          setup() {

          }
        }
      </script>
    2. Setup 语法糖
      <script setup>
      1. Vue@3.2 版本才支持的一个特性。

  Setup 函数的特点：
      1. 不能获取 this
      2. 返回的数据可以在选项式中通过this获取到，反过来不行。
      3. 该函数接受到的第一个参数为 props
      4. 该函数接受到的第二个参数为 context （上下文对象, 是个普通对象，可以解构）
          - attrs
            没有被 props 与 emits 声明过的属性与事件。
          - emit
            触发自定义事件的一个函数，之前是 this.$emit
          - expose
            用于控制组件对外的暴露。
            父组件通过ref获取子组件实例时获取到的内容可以由 expose 来控制。
            1. 默认情况下，父组件通过 ref 标记可以获取到子组件的完整实例对象
            2. 如果子组件通过 expose 做了控制，那么父组件获取到的将由expose决定。
          - slots
            获取父组件传递过来的插槽内容
            {
              default: () => vnode,
              hhhhhhh: () => vnode
            }
      4. 该函数可以返回对象或一个 render function
            1. 返回对象，对象中的元素会绑定到组件的实例上。
            2. 返回 render function，用于控制组件长什么样。
 -->

<template>
  <div>
    <h1>Setup</h1>
    <p>msg: {{ msg }}</p>
    <p>count: {{ count }}</p>
    <button @click="fn1">Fn1</button>
    <button @click="fn2">获取Hello组件的实例</button>
    <hr />
    <Hello ref="myHello" :name="msg" a="a" b="b" @click="fn1">
      <template #default>
        <p>我是默认插槽内容</p>
      </template>

      <template #hhhh>
        <p>我是 哈哈哈哈 的插槽内容</p>
      </template>
    </Hello>
    <!-- <Hello name="张大三" /> -->

    <hr />
    <World />
  </div>
</template>

<script>
import { ref } from 'vue'

import Hello from './components/Hello.vue'
import World from './components/World.vue'

export default {
  components: {
    Hello,
    World
  },

  data() {
    return {
      msg: '张三'
    }
  },

  methods: {
    fn1() {
      // console.log(this.msg)
      // console.log(this.count)
      this.msg = '里斯和'
    },

    fn2() {
      console.log('Hello 组件实例', this.$refs.myHello)
    }
  },

  setup() {
    const count = ref(1)

    return {
      count
    }
  }
}
</script>
